<template>

  <NLayout has-sider wh-full>
    <NLayoutSider content-style="padding: 10px;" :collapsed-width="0" :width="650" show-trigger="arrow-circle"
                  style="border-radius: 10px;height: 100%;">
      <n-card size="small" title="日期"  :bordered="false"  >
        <template #header-extra>
          <NSelect
              style="width: 200px;float: right"
              :options="data.option_space"
              clearable
              placeholder="请选择门店"
              v-model:value="data.space_id"
              @update:value="onSpaceChange"
          />&nbsp;
        </template>
        <n-calendar
            v-model:value="selectedDate"
            #="{ year, month, date }"
            :is-date-disabled="isDateDisabled"
            @update:value="handleUpdateValue"
            @panel-change="(panel, value) => handleChange(panel)"
            style="margin:0 10px"
            class="custom-calendar"
        >
          <div style="margin-top:5px">
            <div v-if="getAppointmentCount(year, month, date)">
              预约: {{ getAppointmentCount(year, month, date) }}
            </div>

          </div>

        </n-calendar>
      </n-card>
    </NLayoutSider>
    <NLayoutContent style="background: transparent;border: 0;margin-left:20px">
      <n-card  size="small" title="预约情况" style="height: 100%;">
        <template #header-extra>
          <NButton  type="primary" @click="handleAdd">
            <TheIcon icon="material-symbols:add" :size="18" class="mr-5" />新建预约
          </NButton>
        </template>
        <n-scrollbar x-scrollable style="width: 100%;" trigger="none">
          <n-flex class="tb_row">
            <div class="tb_head">技师姓名</div>
            <div class="tb_head" v-for="item in data.head">{{item}}</div>
          </n-flex>
          <n-flex class="tb_row" v-for="item in data.designers">
            <div class="tb_head">{{item.name}}</div>

            <div class="tb_task" :style="'width:'+item2.width+'px;margin-left:'+item2.left+'px;'" v-for="item2 in item.ap_con" @click="select_customer(item2)">
              <div>{{item2.project_name}}</div>
              <div style="font-size: 12px">{{item2.user_name}}</div>
              <div style="font-size: 10px">{{item2.user_phone}}</div>

            </div>
          </n-flex>

        </n-scrollbar>
      </n-card>
        <n-drawer v-model:show="data.show_info" width="50%" placement="right">
      <Info :info-data="data.select_customer"/>
    </n-drawer>
    </NLayoutContent>
  </NLayout>




</template>

<script setup>
import {NButton, NDatePicker, NLayout, NLayoutContent, NLayoutSider, NSelect, NTag} from 'naive-ui';
import { useMessage } from 'naive-ui'
import CommonPage from "@/components/page/CommonPage.vue";
import {onMounted,ref} from "vue";
import api from "@/api";
import TheIcon from "@/components/icon/TheIcon.vue";
import Info from "@/views/customer/user/info.vue";
const message = useMessage()
function handleUpdateValue(e) {
  const date = new Date(e);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');  // 月份从0开始，需加1并补充0
  const day = String(date.getDate()).padStart(2, '0');  // 补充0确保两位数字
  const formattedDate = `${year}-${month}-${day}`;
  data.select_date = formattedDate
  get_appointment()
}
const appointmentMap = ref({})
const data = reactive({
  designers:[],
  head:[],
  space_id:1,
  option_space:[],
  select_date:"",
  select_month:"",
  month3data:[],
  select_customer:{
    id:0,
    name:"暂未选择",
    phone:"x",
    money_deposit:0
  },
  show_info:false,
});


onMounted(() => {
  api.getSpaceList().then((res) => {
    data.option_space = res.data
    data.space_id = res.data[0].value
    re_load()
  })

})

function onSpaceChange(){
  message.success("切换门店")
  re_load()
}

function re_load(){
  get_3month()
  get_appointment()
}

function get_appointment(){
  api.getAllAppointment({
    date: data.select_date,
    space_id:data.space_id
  }).then((res) =>{
    data.head = res.data.head
    data.designers = res.data.list
  })
}

function handleChange(panel){
  console.log(panel)
  let year = panel.year
  let month = panel.month
  if(month<10){
    data.select_month =year+"-0"+month
  }else{
    data.select_month =year+"-"+month
  }
  get_3month()
}

function get_3month(){
  api.get3MonthAppointment({
    month:data.select_month,
    space_id:data.space_id
  }).then((res) => {
    data.month3data = res.data

    const map = {};
    res.data.forEach((item) => {
      map[item.date] = item.nums;
    });
    appointmentMap.value = map;

  })
}


// 根据日期获取预约数量
const getAppointmentCount = (year, month, date) => {
  const dateStr = `${year}-${String(month).padStart(2, "0")}-${String(date).padStart(2, "0")}`;
  if(appointmentMap.value[dateStr]>0){
    console.log("取得预约"+appointmentMap.value[dateStr])
  }
  return appointmentMap.value[dateStr] || 0;
};

function select_customer(item){
  message.success('已选择客户:'+item.user_name)
  data.select_customer.id = item.user_id
  data.show_info = true

}


function get_customer_detail(){
  api.getSaasUserDetail({
    id:data.select_customer.id
  }).then((res) => (data.select_customer = res.data))

  data.select_coupons = []
  api.getSaasUserCouponsList({
    user_id:data.select_customer.id
  }).then((res) => (data.coupons = res.data))
}

</script>
<style>
.custom-calendar {
  width: 100%;  /* 设置每个日期格子的宽度 */
  height: 400px;  /* 设置每个日期格子的高度 */
}
.tb_row{
  margin-bottom: 5px;
  gap:0px !important;
  width: 2200px;
  border:1px solid #eee;
  padding: 5px;
}
.tb_head{
  width:80px;
  text-align: center;
  border-right:1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb_task{
  min-width: 80px;
  background: #8945c3;
  color:white;
  text-align: center;
  border-radius: 5px;
  margin:2px;
}
</style>